<template>
	<view class="main">
		<view class="goods">
			<view class="img">
				<image src="@/static/img/ceshi.jpg" mode=""></image>
			</view>
			<view class="txt">
				<view class="name">清利地喹氯铵含片慢性咽炎片咽喉炎肿痛口腔溃疡专用药咳嗽止咳</view>
				<view class="sku">xl</view>
				<view class="price">
					<span>￥120.0</span>
					<span class="num">X1</span>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="rate">
				<view class="msg">商品评价</view>
				<u-rate active-color="#FFD034" inactive-color="#ECECEC" size="30" :count="5" v-model="value"></u-rate>
			</view>
			<view class="text">
				<u--textarea v-model="value1" placeholder="请输入内容" height="150" maxlength="200" border="none"></u--textarea>
			</view>
			<view class="upload">
				<view class="msg">
					<span>最多选择9张图片</span>
					<span>0/9</span>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn">
				发布评价
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: 0,
			value1: '',
			fileList1: []
		};
	},
	onLoad() {},
	methods: {
		// 删除图片
		deletePic(event) {
			this.fileList1.splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			let lists = [].concat(event.file);
			let fileListLen = this.fileList1.length;
			lists.map((item) => {
				this.fileList1.push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this.fileList1[fileListLen];
				this.fileList1.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', 
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 44px);
	background-color: #f8f8f8;
	padding: 15px;
	.goods {
		background-color: #fff;
		padding: 15px 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		.img {
			margin-right: 10px;
			image {
				border-radius: 5px;
				width: 85px;
				height: 85px;
			}
		}
		.txt {
			height: 85px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.name {
				width: 100%;
				color: #232323;
				font-size: 13px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.sku {
				font-size: 13px;
				color: #888888;
			}
			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #cf4444;
				font-size: 13px;
				font-weight: 700;
				.num {
					color: #666666;
					font-size: 13px;
					font-weight: 400;
				}
			}
		}
	}
	.comment {
		padding: 20px 15px;
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 25px;
		.rate {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			.msg {
				font-size: 14px;
				color: #3d3d3d;
				margin-right: 12px;
			}
		}
		.text {
			margin-bottom: 15px;
			/deep/.u-textarea {
				background-color: #f9f9f9;
			}
		}
		.upload {
			.msg {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: #3d3d3d;
				margin-bottom: 10px;
				span:last-child {
					color: #999999;
				}
			}
		}
	}
	.btnBox{
		padding: 0 20px;
		.btn{
			color: #fff;
			background-color: #1785FA;
			padding: 20px 0;
			text-align: center;
			border-radius: 7px;
		}
	}
}
</style>
